class Firework {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.particles = [];
        this.createParticles();
    }

    createParticles() {
        const particleCount = 30 + Math.random() * 20;
        const colors = ['#ff006e', '#fb5607', '#ffbe0b', '#8338ec', '#3a86ff', '#06ffa5'];
        
        for (let i = 0; i < particleCount; i++) {
            const angle = (Math.PI * 2 * i) / particleCount + Math.random() * 0.5;
            const velocity = 3 + Math.random() * 4;
            const color = colors[Math.floor(Math.random() * colors.length)];
            
            this.particles.push({
                x: this.x,
                y: this.y,
                vx: Math.cos(angle) * velocity,
                vy: Math.sin(angle) * velocity,
                color: color,
                alpha: 1,
                size: 2 + Math.random() * 3,
                gravity: 0.1,
                decay: 0.015 + Math.random() * 0.01
            });
        }
    }

    update() {
        this.particles.forEach(particle => {
            particle.x += particle.vx;
            particle.y += particle.vy;
            particle.vy += particle.gravity;
            particle.alpha -= particle.decay;
            particle.size *= 0.98;
        });

        this.particles = this.particles.filter(particle => particle.alpha > 0);
    }

    draw(ctx) {
        this.particles.forEach(particle => {
            ctx.save();
            ctx.globalAlpha = particle.alpha;
            ctx.fillStyle = particle.color;
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
        });
    }

    isDead() {
        return this.particles.length === 0;
    }
}

class FireworksManager {
    constructor() {
        this.canvas = document.getElementById('fireworks');
        this.ctx = this.canvas.getContext('2d');
        this.fireworks = [];
        
        this.setupCanvas();
        this.bindEvents();
        this.animate();
    }

    setupCanvas() {
        const resize = () => {
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeight;
        };
        
        resize();
        window.addEventListener('resize', resize);
    }

    bindEvents() {
        const createFirework = (x, y) => {
            this.fireworks.push(new Firework(x, y));
        };

        // 鼠标点击
        this.canvas.addEventListener('click', (e) => {
            createFirework(e.clientX, e.clientY);
        });

        // 触摸事件
        this.canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            const touch = e.touches[0];
            createFirework(touch.clientX, touch.clientY);
        });

        // 防止触摸时页面滚动
        document.body.addEventListener('touchmove', (e) => {
            e.preventDefault();
        }, { passive: false });
    }

    animate() {
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        this.fireworks.forEach((firework, index) => {
            firework.update();
            firework.draw(this.ctx);
            
            if (firework.isDead()) {
                this.fireworks.splice(index, 1);
            }
        });

        requestAnimationFrame(() => this.animate());
    }
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    new FireworksManager();
});
